<script setup>
	import {
		ref
	} from 'vue'
	import File from './components/File.vue'
	import Safe from './components/Safe.vue'
	import Message from './components/Message.vue'
	import Set from './components/Set.vue'

	const activeTab = ref(0);

	const switchTab = (tabId) => {
		activeTab.value = tabId;
	};
</script>
<template>
	<div class="container">
		<div class="page-title bold">账户管理</div>
		<div class="bs-panel">
			<el-row class="account-menu-list">
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(0)">
						<img src="../../assets/images/file-icon.png" alt="">
						<span>个人资料</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(1)">
						<img src="../../assets/images/safe-icon.png" alt="">
						<span>安全中心</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(2)">
						<img src="../../assets/images/email-icon.png" alt="">
						<span>站内信</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(3)">
						<img src="../../assets/images/set-icon.png" alt="">
						<span>通知设置</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<File v-if="activeTab === 0" />
		<Safe v-if="activeTab === 1" />
		<Message v-if="activeTab === 2" />
		<Set v-if="activeTab === 3" />
	</div>
</template>
<style scoped lang='scss'>
	
</style>